{% extends 'base.html' %}

{% block client_dashboard %}
<div id="client-dashboard" class="hidden flex-1 flex flex-col lg:flex-row">
    <!-- 侧边栏 -->
    <aside class="w-full lg:w-64 bg-white shadow-md lg:h-screen lg:fixed lg:inset-y-0 lg:z-10 transition-all duration-300">
        <div class="p-4 border-b">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full bg-bank-gradient flex items-center justify-center text-white">
                    <i class="fa fa-user-circle text-xl"></i>
                </div>
                <h2 class="text-xl font-bold text-gray-900">个人银行</h2>
            </div>
        </div>

        <nav class="py-4">
            <div class="px-4 mb-6">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">我的账户</p>
            </div>

            <a href="#client-dashboard" class="nav-link active">
                <i class="fa fa-dashboard mr-3 w-5 text-center"></i>
                <span>账户首页</span>
            </a>

            <a href="#account-info" class="nav-link">
                <i class="fa fa-id-card mr-3 w-5 text-center"></i>
                <span>个人信息</span>
            </a>

            <a href="#account-balance" class="nav-link">
                <i class="fa fa-money mr-3 w-5 text-center"></i>
                <span>账户余额</span>
            </a>

            <div class="px-4 mt-8 mb-6">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">账户操作</p>
            </div>

            <a href="#deposit" class="nav-link">
                <i class="fa fa-plus-circle mr-3 w-5 text-center"></i>
                <span>存款</span>
            </a>

            <a href="#withdraw" class="nav-link">
                <i class="fa fa-minus-circle mr-3 w-5 text-center"></i>
                <span>取款</span>
            </a>

            <a href="#transfer" class="nav-link">
                <i class="fa fa-exchange mr-3 w-5 text-center"></i>
                <span>转账</span>
            </a>

            <a href="#transaction-history" class="nav-link">
                <i class="fa fa-history mr-3 w-5 text-center"></i>
                <span>交易记录</span>
            </a>

            <a href="#card-loss" class="nav-link">
                <i class="fa fa-lock mr-3 w-5 text-center"></i>
                <span>挂失</span>
            </a>

            <a href="#change-password" class="nav-link">
                <i class="fa fa-key mr-3 w-5 text-center"></i>
                <span>修改密码</span>
            </a>

            <div class="px-4 mt-8 mb-6">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">系统</p>
            </div>

            <a href="#login-page" id="client-logout" class="nav-link">
                <i class="fa fa-sign-out mr-3 w-5 text-center"></i>
                <span>退出登录</span>
            </a>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 lg:ml-64 p-6">
        <!-- 顶部导航 -->
        <header class="mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">个人银行首页</h1>
                    <p class="text-gray-500 mt-1" id="client-welcome">欢迎回来，John</p>
                </div>
                <div class="mt-4 md:mt-0 flex items-center space-x-4">
                    <div class="relative">
                        <button class="flex items-center space-x-2 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg transition-all duration-200">
                            <i class="fa fa-bell"></i>
                            <span class="hidden md:inline">通知</span>
                            <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">1</span>
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/40/40" alt="客户头像" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow">
                        <div class="hidden md:block">
                            <p class="text-sm font-medium text-gray-900" id="client-name">John</p>
                            <p class="text-xs text-gray-500" id="client-card">银行卡: 1010357600000001</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 账户信息卡片 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-shadow mb-8">
            <div class="flex flex-col md:flex-row md:items-center">
                <div class="mb-6 md:mb-0 md:mr-8">
                    <img src="https://picsum.photos/id/1005/120/120" alt="客户头像" class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg">
                </div>
                <div class="flex-1">
                    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-900" id="client-fullname">John</h2>
                            <p class="text-gray-500">个人客户</p>
                        </div>
                        <a href="#account-info" class="btn-secondary text-sm">
                            <i class="fa fa-edit mr-1"></i> 修改信息
                        </a>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-xs text-gray-500">客户编号</p>
                            <p class="text-sm font-medium text-gray-900" id="client-id">1</p>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-xs text-gray-500">身份证号</p>
                            <p class="text-sm font-medium text-gray-900" id="client-pid">110000000000000001</p>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-xs text-gray-500">联系电话</p>
                            <p class="text-sm font-medium text-gray-900" id="client-phone">13900000001</p>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <p class="text-xs text-gray-500">联系地址</p>
                            <p class="text-sm font-medium text-gray-900" id="client-address">江苏省南京市</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 账户余额卡片 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-shadow mb-8">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">账户余额</h3>
                <a href="#account-balance" class="text-primary text-sm font-medium hover:underline">查看详情</a>
            </div>
            <div class="flex flex-col md:flex-row md:items-center">
                <div class="mb-6 md:mb-0 md:mr-8">
                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-money text-2xl"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="text-sm text-gray-500 mb-2">当前账户余额</p>
                    <p class="text-4xl font-bold text-gray-900" id="balance-amount">¥1,000.00</p>
                    <p class="text-xs text-success mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 5.2% <span class="text-gray-500 ml-1">较上月</span>
                    </p>
                </div>
                <div class="mt-4 md:mt-0">
                    <button class="btn-primary w-full md:w-auto">
                        <i class="fa fa-plus mr-2"></i> 存款
                    </button>
                    <button class="btn-secondary w-full md:w-auto mt-2 md:mt-0 md:ml-2">
                        <i class="fa fa-minus mr-2"></i> 取款
                    </button>
                </div>
            </div>
        </div>

        <!-- 快捷操作按钮 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            <a href="#deposit" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
                    <i class="fa fa-plus-circle text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">存款</h4>
                <p class="text-xs text-gray-500 mt-1">向账户存入资金</p>
            </a>

            <a href="#withdraw" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning mb-3">
                    <i class="fa fa-minus-circle text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">取款</h4>
                <p class="text-xs text-gray-500 mt-1">从账户提取资金</p>
            </a>

            <a href="#transfer" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center text-accent mb-3">
                    <i class="fa fa-exchange text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">转账</h4>
                <p class="text-xs text-gray-500 mt-1">向其他账户转账</p>
            </a>

            <a href="#transaction-history" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mb-3">
                    <i class="fa fa-history text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">交易记录</h4>
                <p class="text-xs text-gray-500 mt-1">查看交易历史</p>
            </a>

            <a href="#card-loss" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center text-danger mb-3">
                    <i class="fa fa-lock text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">挂失</h4>
                <p class="text-xs text-gray-500 mt-1">银行卡挂失</p>
            </a>

            <a href="#change-password" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success mb-3">
                    <i class="fa fa-key text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">修改密码</h4>
                <p class="text-xs text-gray-500 mt-1">修改账户密码</p>
            </a>

            <a href="#" class="bg-white rounded-xl shadow-md p-5 card-shadow flex flex-col items-center text-center hover:shadow-lg transition-shadow">
                <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mb-3">
                    <i class="fa fa-file-text-o text-xl"></i>
                </div>
                <h4 class="font-medium text-gray-900">导出账单</h4>
                <p class="text-xs text-gray-500 mt-1">导出交易账单</p>
            </a>
        </div>

        <!-- 最近交易记录 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-shadow">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">最近交易记录</h3>
                <a href="#transaction-history" class="text-primary text-sm font-medium hover:underline">查看全部</a>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易类型</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易金额</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">对方账户</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-02-14 09:30:22</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    存款
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-900">+¥1,000.00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    已完成
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-02-10 14:15:47</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    开户
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-900">+¥1,000.00</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    已完成
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
{% endblock %}